<template>
  <div class="dashboard-container">
    <h2 class="dashboard-title">欢迎回来，{{userInfoPink.username}}大人~</h2>

    <div class="stats-cards">
      <el-card class="stat-card" v-for="(card, index) in stats" :key="index" shadow="hover">
        <div class="card-content">
          <div class="card-icon" :style="{ backgroundColor: card.color }">
            <el-icon :size="24"><component :is="card.icon" /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-title">{{ card.title }}</div>
            <div class="card-value">{{ card.value }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="dashboard-row">
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>动漫访问量统计</span>
            <el-tag type="warning">最近7天</el-tag>
          </div>
        </template>
        <div ref="visitChart" style="height: 300px;"></div>
      </el-card>

      <el-card class="quick-actions" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>快速操作</span>
          </div>
        </template>
        <div class="action-buttons">
          <el-button
              v-for="action in quickActions"
              :key="action.text"
              :type="action.type"
              :icon="action.icon"
              @click="handleAction(action.action)"
          >
            {{ action.text }}
          </el-button>
        </div>
      </el-card>
    </div>

    <div class="recent-comments">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>最新评论</span>
            <el-button type="text" @click="viewAllComments">查看全部</el-button>
          </div>
        </template>
        <el-table :data="recentComments" style="width: 100%">
          <el-table-column prop="user" label="用户" width="180">
            <template #default="{ row }">
              <div class="user-cell">
                <el-avatar :size="30" :src="row.avatar" />
                <span>{{ row.user }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="评论内容" />
          <el-table-column prop="anime" label="所属动漫" width="180" />
          <el-table-column prop="time" label="时间" width="180" />
          <el-table-column label="操作" width="120">
            <template #default>
              <el-button size="small" type="text">回复</el-button>
              <el-button size="small" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import {
  User,
  VideoCamera,
  Comment,
  Star,
  Plus,
  Edit,
  Delete,
  Upload,
  Download
} from '@element-plus/icons-vue'
import {userInform} from "@/stores/userInform.js";

const router = useRouter()
const userInfoPink = userInform();

const stats = ref([
  { title: '总用户数', value: '5,432', icon: User, color: '#ff6b81' },
  { title: '番剧数量', value: '1,234', icon: VideoCamera, color: '#32d3eb' },
  { title: '国创数量', value: '678', icon: VideoCamera, color: '#f7b731'},
  { title: '电影数量' , value: '345', icon: VideoCamera, color: '#ff6b81' },
  { title: '评论数', value: '12,345', icon: Comment, color: '#f7b731' },
  { title: '观看数', value: '23,456', icon: Star, color: '#a55eea' }
])

const quickActions = ref([
  { text: '添加动漫', icon: Plus, type: 'primary', action: 'addAnime' },
  { text: '编辑信息', icon: Edit, type: 'success', action: 'editInfo' },
  { text: '批量删除', icon: Delete, type: 'danger', action: 'batchDelete' },
  { text: '数据导出', icon: Upload, type: 'warning', action: 'exportData' },
  { text: '数据导入', icon: Download, type: 'info', action: 'importData' }
])

const recentComments = ref([
  {
    user: '樱花酱',
    avatar: 'https://example.com/avatar1.jpg',
    content: '这部动漫太棒了，剧情超级感人！',
    anime: '《你的名字》',
    time: '2025-04-18 10:30'
  },
  {
    user: '二次元少年',
    avatar: 'https://example.com/avatar2.jpg',
    content: '期待第二季快点出啊！',
    anime: '《鬼灭之刃》',
    time: '2025-04-17 15:45'
  },
  {
    user: '动漫爱好者',
    avatar: 'https://example.com/avatar3.jpg',
    content: '画风很独特，音乐也很好听',
    anime: '《紫罗兰永恒花园》',
    time: '2025-04-16 20:12'
  },
  {
    user: '萌新小白',
    avatar: 'https://example.com/avatar4.jpg',
    content: '刚入坑，求推荐类似的作品',
    anime: '《进击的巨人》',
    time: '2025-04-15 09:23'
  }
])

const visitChart = ref(null)

onMounted(() => {
  initVisitChart()
})

const initVisitChart = () => {
  const chart = echarts.init(visitChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [
      {
        name: '访问量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        }
      }
    ]
  }
  chart.setOption(option)

  window.addEventListener('resize', function() {
    chart.resize()
  })
}

const handleAction = (action) => {
  switch(action) {
    case 'addAnime':
      router.push({ name: 'anime-add' })
      break
    case 'editInfo':
      // 编辑逻辑
      break
    case 'batchDelete':
      // 批量删除逻辑
      break
    case 'exportData':
      // 导出逻辑
      break
    case 'importData':
      // 导入逻辑
      break
  }
}

const viewAllComments = () => {
  router.push({ name: 'comment-list' })
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-title {
  color: #ff6b81;
  margin-bottom: 20px;
  font-size: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 10px;
  border: none;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 15px;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.card-value {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.dashboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card, .quick-actions {
  border-radius: 10px;
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.user-cell {
  display: flex;
  align-items: center;
}

.user-cell span {
  margin-left: 10px;
}
</style>
